<template>
  <div class="course-wizard">
    <el-steps :active="activeStep" simple>
      <el-step title="基本信息">
      </el-step>
      <el-step :icon="Edit" title="课程目录"></el-step>
      <el-step title="课程视频"></el-step>
      <el-step title="课程测验"></el-step>
      <el-step title="课程老师"></el-step>

      <!--      <el-step title="课程证书" icon="el-icon-medal"></el-step>-->
    </el-steps>

    <div class="steps-content">
      <template v-if="activeStep === 0">
        <el-form ref="courseForm" :model="courseForm" label-width="120px">
          <el-form-item label="课程分类">
            <el-select v-model="courseForm.category" placeholder="请选择">
              <el-option label="分类1" value="category1"></el-option>
              <el-option label="分类2" value="category2"></el-option>
              <!-- 更多分类选项 -->
            </el-select>
          </el-form-item>

          <el-form-item label="课程名称">
            <el-input v-model="courseForm.name" placeholder="请输入课程名称"></el-input>
          </el-form-item>

          <el-form-item label="课程图片">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="courseForm.imageUrl" :src="courseForm.imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>

          <el-form-item label="付费/免费">
            <el-radio-group v-model="courseForm.priceType">
              <el-radio label="free">免费</el-radio>
              <el-radio label="paid">付费</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="下架时间">
            <el-date-picker v-model="courseForm.shelvedTime" type="date" placeholder="请选择"></el-date-picker>
          </el-form-item>

          <el-form-item label="学习有效期">
            <el-radio-group v-model="courseForm.validity">
              <el-radio label="limited">限时</el-radio>
              <el-radio label="permanent">永久</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="课程简介">
            <el-input
              type="textarea"
              v-model="courseForm.introduction"
              :rows="4"
              placeholder="请输入，最多可添加200字">
            </el-input>
          </el-form-item>

          <el-form-item label="适合人群">
            <el-input
              type="textarea"
              v-model="courseForm.targetAudience"
              :rows="4"
              placeholder="请输入，最多可添加200字">
            </el-input>
          </el-form-item>

          <el-form-item label="课程详情">
            <el-input
              type="textarea"
              v-model="courseForm.details"
              :rows="4"
              placeholder="请输入，最多可添加500字">
            </el-input>
          </el-form-item>
        </el-form>


      </template>
      <template v-if="activeStep === 1">
        <div class="course-chapters">
          <el-form ref="chapterForm" :model="chapterForm" label-width="120px">
            <el-form-item label="新增章">
              <el-input v-model="chapterForm.newChapterName" placeholder="请输入章节名称"></el-input>
              <el-button type="primary" @click="addChapter">添加章</el-button>
            </el-form-item>
          </el-form>

          <el-table :data="chapters" style="width: 100%" border>
            <el-table-column prop="index" label="序号" width="50"></el-table-column>
            <el-table-column prop="name" label="章节名称"></el-table-column>
            <el-table-column prop="order" label="章排序" width="100"></el-table-column>
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button size="mini" @click="addSection(scope.$index)">添加小节</el-button>
                <el-button size="mini" type="danger" @click="removeChapter(scope.$index)">删除本章</el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-table :data="sections" style="width: 100%" border>
            <el-table-column prop="index" label="序号" width="50"></el-table-column>
            <el-table-column prop="name" label="小节名称"></el-table-column>
            <el-table-column prop="order" label="排序" width="100"></el-table-column>
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button size="mini" type="danger" @click="removeSection(scope.$index)">删除小节</el-button>
              </template>

            </el-table-column>
          </el-table>


        </div>
      </template>
      <template v-if="activeStep === 2">
        <div class="course-videos">
          <el-form ref="videoForm" :model="videoForm" label-width="120px">
            <el-form-item label="视频名称">
              <el-input v-model="videoForm.name" placeholder="请输入视频名称"></el-input>
            </el-form-item>

            <el-form-item label="选择视频">
              <el-upload
                class="upload-video"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-upload="beforeUpload"
                :file-list="videoForm.fileList">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">支持MP4格式，文件大小不超过500MB</div>
              </el-upload>
            </el-form-item>

            <el-form-item label="视频时长">
              <el-input v-model="videoForm.duration" placeholder="请输入视频时长，如：00:10:00"></el-input>
            </el-form-item>

            <el-form-item label="免费试看">
              <el-switch v-model="videoForm.freePreview"></el-switch>
            </el-form-item>

            <el-table :data="videoForm.videos" style="width: 100%" border>
              <el-table-column prop="chapterName" label="章节名称"></el-table-column>
              <el-table-column prop="videoName" label="视频名称"></el-table-column>
              <el-table-column prop="duration" label="视频时长"></el-table-column>
              <el-table-column prop="freePreview" label="免费试看">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.freePreview">是</el-tag>
                  <el-tag v-else type="info">否</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                  <el-button size="mini" type="danger" @click="removeVideo(scope.row)">删除视频</el-button>
                </template>
              </el-table-column>
            </el-table>


          </el-form>
        </div>
      </template>
      <template v-if="activeStep === 3">
        <div class="course-quizzes">
          <el-form ref="quizForm" :model="quizForm" label-width="120px">
            <el-form-item label="选择题目">
              <el-button type="primary" @click="selectQuestions">选择题目</el-button>
            </el-form-item>

            <el-table :data="quizForm.questions" style="width: 100%" border>
              <el-table-column prop="index" label="序号" width="50"></el-table-column>
              <el-table-column prop="content" label="题目"></el-table-column>
              <el-table-column prop="score" label="题目分数"></el-table-column>
              <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                  <el-button size="mini" type="danger" @click="removeQuestion(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>

            <el-form-item>
              <el-button type="primary" @click="addQuiz">添加阶段性考试</el-button>
            </el-form-item>


          </el-form>
        </div>
      </template>
      <template v-if="activeStep === 4">
        <div class="course-teachers">
          <el-form ref="teacherForm" :model="teacherForm" label-width="120px">
            <el-form-item label="选择老师">
              <el-button type="primary" @click="selectTeachers">选择老师</el-button>
            </el-form-item>

            <el-table :data="teacherForm.teachers" style="width: 100%" border>
              <el-table-column prop="index" label="序号" width="50"></el-table-column>
              <el-table-column prop="name" label="老师名称"></el-table-column>
              <el-table-column prop="introduction" label="教师介绍"></el-table-column>
              <el-table-column prop="order" label="排序" width="100">
                <template slot-scope="scope">
                  <el-button size="mini" @click="moveTeacher(scope.$index, -1)">↑</el-button>
                  <el-button size="mini" @click="moveTeacher(scope.$index, 1)">↓</el-button>
                </template>
              </el-table-column>
              <el-table-column prop="isDisplayed" label="用户端是否显示" width="150">
                <template slot-scope="scope">
                  <el-switch v-model="scope.row.isDisplayed"></el-switch>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                  <el-button size="mini" type="info" @click="hideTeacher(scope.$index)">隐藏</el-button>
                  <el-button size="mini" type="danger" @click="removeTeacher(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>


          </el-form>
        </div>
      </template>
      <!--      <template v-if="activeStep === 5">-->
      <!--        <div>-->
      <!--          <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">-->
      <!--            <el-form-item label="课程证书" prop="certificate" required>-->
      <!--              <el-upload ref="certificate" :file-list="certificatefileList" :action="certificateAction"-->
      <!--                         :before-upload="certificateBeforeUpload" list-type="picture-card" accept="image/*">-->
      <!--                <i class="el-icon-plus"></i>-->
      <!--              </el-upload>-->
      <!--            </el-form-item>-->

      <!--          </el-form>-->
      <!--        </div>-->
      <!--      </template>-->
    </div>

    <el-button @click="prevStep">返回</el-button>
    <el-button type="primary" @click="nextStep">保存并进行下一步</el-button>
    <el-button @click="submitForm">保存并返回</el-button>
    <el-button v-if="activeStep === 5" type="primary" @click="submitForm">完成</el-button>
  </div>
</template>

<script>

export default {
  data() {
    return {
      activeStep: 0,
      courseForm: {
        category: '',
        name: '',
        imageUrl: '',
        priceType: 'free',
        shelvedTime: '',
        validity: 'permanent',
        introduction: '',
        targetAudience: '',
        details: ''
      },
      videoForm: {
        name: '',
        fileList: [],
        duration: '',
        freePreview: false,
        videos: [
          // 模拟数据，实际应用中应从服务器获取
          { chapterName: '章节名称', videoName: '视频名称', duration: '00:10:00', freePreview: true },
        ],
      },
      chapterForm: {
        newChapterName: '',
        chapters: [
          { index: '01', name: '章节名称', order: '', sections: [] },
          { index: '02', name: '章节名称', order: '', sections: [] },
          // 模拟数据，实际应用中应从服务器获取
        ],
        sections: [
          { index: '01', name: '小节名称', order: '' },
          { index: '02', name: '小节名称', order: '' },
          // 模拟数据，实际应用中应从服务器获取
        ],
      },
      quizForm: {
        questions: [
          // 模拟数据，实际应用中应从服务器获取
          { index: '01', content: '题目1', score: 8 },
          { index: '02', content: '题目2', score: 10 },
        ],
      },
      teacherForm: {
        teachers: [
          { index: 1, name: 'XXXXX', introduction: 'XXXXXXXXXXX', order: 1, isDisplayed: true },
          { index: 2, name: 'XXXXX', introduction: 'XXXXXXXXXXX', order: 2, isDisplayed: true },
          // 模拟数据，实际应用中应从服务器获取
        ],
      },
      certificateAction: 'https://jsonplaceholder.typicode.com/posts/',
      certificatefileList: [],

    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.courseForm.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 20;

      if (!isJPG && !isPNG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 20MB!');
      }
      return (isJPG || isPNG) && isLt2M;
    },
    addChapter() {
      if (this.chapterForm.newChapterName.trim()) {
        const newChapter = {
          index: String(this.chapterForm.chapters.length + 1),
          name: this.chapterForm.newChapterName,
          order: '',
          sections: []
        };
        this.chapterForm.chapters.push(newChapter);
        this.chapterForm.newChapterName = '';
      } else {
        this.$message.error('章节名称不能为空');
      }
    },
    addSection(index) {
      const newSection = {
        index: String(this.chapterForm.chapters[index].sections.length + 1),
        name: '小节名称',
        order: ''
      };
      this.chapterForm.chapters[index].sections.push(newSection);
    },
    removeChapter(index) {
      this.chapterForm.chapters.splice(index, 1);
    },
    removeSection(index, sectionIndex) {
      this.chapterForm.chapters[index].sections.splice(sectionIndex, 1);
    },
    handlePreview(file) {
      // 处理视频预览
    },
    handleRemove(file, fileList) {
      // 处理视频移除
    },
    beforeUpload(file) {
      // 处理上传前验证
      const isMP4 = file.type === 'video/mp4';
      if (!isMP4) {
        this.$message.error('上传视频只能是 MP4 格式!');
      }
      const isLt500M = file.size / 1024 / 1024 < 500;

      if (!isLt500M) {
        this.$message.error('上传视频大小不能超过 500MB!');
      }
      return isMP4 && isLt500M;
    },
    removeVideo(video) {
      // 删除视频的逻辑
      const index = this.videoForm.videos.indexOf(video);
      if (index !== -1) {
        this.videoForm.videos.splice(index, 1);
      }
    },
    selectQuestions() {
      // 选择题目的逻辑
      this.$message.info('选择题目功能待实现');
    },
    addQuiz() {
      // 添加阶段性考试的逻辑
      this.$message.info('添加阶段性考试功能待实现');
    },
    removeQuestion(index) {
      // 删除题目的逻辑
      this.quizForm.questions.splice(index, 1);
    },
    selectTeachers() {
      // 选择老师的逻辑
      this.$message.info('选择老师功能待实现');
    },
    moveTeacher(index, direction) {
      // 移动老师排序的逻辑
      const teachers = this.teacherForm.teachers;
      if (direction === -1 && index > 0) {
        this.swap(teachers, index, index - 1);
      } else if (direction === 1 && index < teachers.length - 1) {
        this.swap(teachers, index, index + 1);
      }
    },
    swap(array, indexA, indexB) {
      const temp = array[indexA];
      array[indexA] = array[indexB];
      array[indexB] = temp;
    },
    hideTeacher(index) {
      // 隐藏老师的逻辑
      this.teacherForm.teachers[index].isDisplayed = false;
    },
    removeTeacher(index) {
      // 删除老师的逻辑
      this.teacherForm.teachers.splice(index, 1);
    },
    certificateBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 20
      if (!isRightSize) {
        this.$message.error('文件大小超过 20MB')
      }
      let isAccept = new RegExp('image/*').test(file.type)
      if (!isAccept) {
        this.$message.error('应该选择image/*类型的文件')
      }
      return isRightSize && isAccept
    },
    prevStep() {
      if (this.activeStep > 0) {
        this.activeStep--;
      }
    },
    nextStep() {
      if (this.activeStep < 5) {
        this.activeStep++;
      }
    },
    submitForm() {
      console.log('提交课程信息', this.courseForm);
      this.$message.success('课程信息提交成功');
      console.log('提交课程目录信息', this.chapterForm);
      this.$message.success('课程目录信息提交成功');
      console.log('提交课程视频信息', this.videoForm);
      this.$message.success('课程视频信息提交成功');
      console.log('提交课程测验信息', this.quizForm);
      this.$message.success('课程测验信息提交成功');
      console.log('提交课程老师信息', this.teacherForm);
      this.$message.success('课程老师信息提交成功');
      console.log('提交课程证书信息', this.certificateForm);
      this.$message.success('课程证书信息提交成功');
    },

  },
};
</script>

<style scoped>

.course-wizard {
  max-width: 1500px;
  margin: 20px auto;
}
.steps-content {
  margin-top: 20px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  min-width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.course-chapters {
  max-width: 800px;
  margin: 20px auto;
}
.operation-buttons {
  margin-top: 20px;
  text-align: right;
}
course-videos {
  max-width: 800px;
  margin: 20px auto;
}
.operation-buttons {
  margin-top: 20px;
  text-align: right;
}
.upload-video {
  margin-bottom: 20px;
}
.course-quizzes {
  max-width: 800px;
  margin: 20px auto;
}
.operation-buttons {
  margin-top: 20px;
  text-align: right;
}
.course-teachers {
  max-width: 800px;
  margin: 20px auto;
}
.operation-buttons {
  margin-top: 20px;
  text-align: right;
}
.course-certificate {
  max-width: 600px;
  margin: 20px auto;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  min-width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.operation-buttons {
  margin-top: 20px;
  text-align: right;
}
.el-upload__tip {
  line-height: 1.2;
}

</style>
